<template>
  <div class="hello">
    <ul v-for="item in productList" :key="item.id">
      <li>
        <div class="name">{{ item.name }}</div>
        <button @click="item.stock--">-</button>
        <span>{{ item.stock }}</span>
        <button @click="onAdd(item)">+</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productList: [
        {
          id: 1,
          name: "迪迦奥特曼",
          stock: 5
        },
        {
          id: 2,
          name: "赛文奥特曼",
          stock: 6
        },
        {
          id: 3,
          name: "雷欧奥特曼",
          stock: 7
        },
        {
          id: 4,
          name: "泰罗奥特曼",
          stock: 20
        }
      ]
    };
  },

  methods: {
    // onLess(e) {
    //   console.log(e);
    //   if(e.stock>0){
    //      e.stock--;
    //   }else{
    //     e.stock = '售罄'
    //   }

    // },
    onAdd(e) {
      console.log(e);
      e.stock++;
    }
  },
  name: "商品和库存管理",
  props: {
    msg: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: center;
}
li {
  display: flex;
  margin: 0 10px;
  text-align: center;
}
a {
  color: #42b983;
}
</style>
